<template>
  <div>
    <div>
      <el-form :inline="true" :model="trainingPlan" class="demo-form-inline">
        <el-form-item label="培训计划编号">
          <el-input v-model="trainingPlan.id" placeholder="请输入培训计划编号"></el-input>
        </el-form-item>
        <el-form-item label="培训计划名">
          <el-input v-model="trainingPlan.name" placeholder="请输入培训计划名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="show">查询</el-button>
          <el-button type="primary" @click="clear">重1置</el-button>
        </el-form-item>
      </el-form>

      <div>
        <el-col :span="8" v-for="(plan, index) in tableData" :key="index" :offset="index % 2 > 0 ? 0 : 0">
          <el-card :body-style="{ padding: '0px' }" @click.native="handlePlanClick(plan)">
            <img src="https://trainfileqiyekaifa.oss-cn-beijing.aliyuncs.com/%E8%AF%BE%E7%A8%8B%E5%9B%BE%E7%89%87.png"
              class="image">
            <div style="padding: 14px;">
              <span>培训计划名称：{{ plan.name }}</span>
              <br>
              <span>培训周期：{{ getTrainingCycle(plan.cycleId) }}天</span>
              <br>
              <span>培训类型：{{ plan.type }}</span>
            </div>
          </el-card>
        </el-col>
      </div>
      <el-dialog title="学习" :visible.sync="dialogVisible" :before-close="close" :fullscreen="true">
        <iframe :src="url" style="width: 100%;height: 500px"></iframe>
      </el-dialog>
    </div>
    <br>
    <!--分页工具条-->
    <el-pagination style="position:absolute;bottom: 20px;margin-left: 40vh" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :background="background" :current-page="currentPage" :page-sizes="[5, 10]"
      :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
    </el-pagination>
  </div>


</template>
<script>


import { addTrainingPlan, changeTrainingPlan, deleteTrainingPlan, getAllTrainingPlan } from "@/api/trainingPlan";
import { getTrainingCycleList } from "@/api/trainingCycle";
import { chooseConsult, getConsultListForAgency, unchooseConsult } from "@/api/consult";
import { chooseQuestions, getTestQuestion, unchooseQuestions } from "@/api/testPaper";
import { chooseDocumentVideo, getDocumentVideo, unchooseDocumentVideo } from "@/api/documentVideo";
import { getDocumentVideoTypeList } from "@/api/documentVideoType";
import axios from "axios";

export default {
  data() {
    return {
      background: true,
      // 每页显示的条数
      pageSize: 5,
      // 总记录数
      totalCount: 100,
      // 当前页码
      currentPage: 1,
      // 添加数据对话框是否展示的标记
      dialogVisible: false,
      // 表格数据
      tableData: [],
      addOrUpdate: true,//true为add
      trainingPlan: {},
      form: {},
      posts: [],
      multipleSelection: [],
      selectedIds: [],
      trainingPlanList: [],
      formLabelWidth: "180px",
      trainingCycleList: [],//培训周期表
      //配置试卷
      configurePaperVisible: false,
      testPaper: {},
      trainingPlanId: '',
      searchChoose: true,
      questionSelection: [],
      testQuestions: [],
      //配置视频文档
      configureDocumentVideoVisible: false,
      documentVideos: [],
      documentVideoSelection: [],
      documentVideoTypeList: [],
      url: 'http://localhost:8081/pdfjs-4.9.155-dist/web/viewer.html?file=https://web-tlias077.oss-cn-beijing.aliyuncs.com/4628f336-cdf4-4017-bf11-09410d818009.pdf'
    }
  },
  watch: {
    searchChoose(newValue, oldValue) {
      this.getTestQuestions();
      this.getDocumentVideos();
    }
  },
  methods: {
    show() {
      getAllTrainingPlan(this.trainingPlan, this.currentPage, this.pageSize).then((res) => {
        if (res.data.code === 1) {
          this.totalCount = res.data.data.total;
          this.tableData = res.data.data.rows;
          //console.log(this.tableData)
          if (this.tableData.length === 0 && this.currentPage > 1) {
            this.currentPage -= 1;
            this.show();
          }
        }
      }).catch((e) => {
      })
    },

    handlePlanClick(plan) {
      this.dialogVisible = true;
      this.trainingPlan = plan;
      //window.location.href = 'http://localhost:8081/pdfjs-4.9.155-dist/web/viewer.html?file='+this.url+"?csacsa=wcawc";
      //window.location.href = 'http://localhost:8081/pdfjs-4.9.155-dist/web/viewer.html?file='+this.url+"?csacsa=wcawc";
      //window.location.href ='http://localhost:8081/study?trainPlanId='+plan.id;

    },







    //获取视频文档类型
    getDocumentVideoTypeLists() {
      getDocumentVideoTypeList().then((res) => {
        if (res.data.code === 1) {
          this.documentVideoTypeList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch((e) => {
      })
    },
    getTypeName(type) {
      const types = this.documentVideoTypeList.find(t => t.id === type);
      return types ? types.name : '未找到对应的类型';
    },
    getDocumentVideos() {
      getDocumentVideo(this.trainingPlanId, this.searchChoose).then((res) => {
        console.log(res)
        if (res.data.code === 1) {
          this.documentVideos = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch((e) => {
      })
    },
    closeConfigurePaper() {
      this.configurePaperVisible = false;
    },

    getTestQuestions() {
      getTestQuestion(this.trainingPlanId, this.searchChoose).then((res) => {
        console.log(res)
        if (res.data.code === 1) {
          this.testQuestions = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch((e) => {
      })
    },

    close() {
      this.dialogVisible = false;
      this.trainingPlan = {}
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    //分页
    handleSizeChange(val) {
      // 重新设置每页显示的条数
      this.pageSize = val;
      this.show();
    },
    handleCurrentChange(val) {
      // 重新设置当前页码
      this.currentPage = val;
      this.show();
    },

    //获取培训周期列表
    getTrainingCycleLists() {
      getTrainingCycleList().then((res) => {
        if (res.data.code === 1) {
          this.trainingCycleList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch((e) => {
      })
    },
    getTrainingCycle(id) {
      let trainingCycle = this.trainingCycleList.find(data => data.id === id);
      return trainingCycle ? trainingCycle.cycle : "";
    },
    clear() {
      this.trainingPlan = {};
      this.show();
    },



  },
  mounted() {
    this.show();
    this.getTrainingCycleLists();
    this.getDocumentVideoTypeLists();
  },
};
</script>


<style>
* {
  margin: 0;
  padding: 0;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
